<template>
    <div>
        <table border="1">
            <tr>
                <td>序号</td>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>商品数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,index) in tlist">
                <td>{{index+1}}</td>
                <td>{{ item.text }}</td>
                <td>{{ item.price }}</td>
                <td>
                    <button @click="minus(index)">-</button>
                    <input type="text" v-model="item.num">
                    <button @click="add(index)">+</button>
                </td>
                <td>
                    <button @click="dele">移除</button>
                </td>

            </tr>
        </table>
        总价：{{ totalCount() }}
    </div>
</template>
<script>
export default {
    //数据定义
    data() {
        return {
            tlist:[{text:'iphone8',price:'5099',num:0},{text:'iphone xs',price:'8699',num:0},{text:'iphone xr',price:'6499',num:0}]
            
        }
    },
    //初始化方法钩子方法
    mounted() {
        
    },
    //常用方法，自定义方法
    methods: {
        totalCount:function(){

                //默认数量
                let total = 0;
                //遍历
                for(let i=0,l=this.tlist.length;i<l;i++){

                        total += this.tlist[i].price*this.tlist[i].num;
                }

                return total;


            },
        minus:function(index){
            if(this.tlist[index].num > 0){
                this.tlist[index].num--;
            }
        },
        add:function(index){
            this.tlist[index].num++;
        },
        dele(index) {
            this.tlist.splice(index, 1)
      }
        
    },
}
</script>